/* eslint-disable */
import * as zrender from "./zrender";
import { AppManager } from "./AppManager";
import { options } from "less";

const NodeSizeConfig = {
    statusWidth: 15,
    width: 65,
    height: 35,
    r: 3,
    nodeR: 16,
    workFlowR: 16,
    defaultImg: "",
    defaultStatusImg: "\n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",
    backgroundColor: 'white',
    stokeOverColor: 'blue',
    borderColor: '#3D7EFF',
    linkColor: '#3D7EFF',
    linkDownImg: "\n+0MEiUZJuCqFghB0/pBokEhUCg2CaDQaV1RKpVKQaHQyye7NZnMOvmY3s/PuzH6zY8NeD+Zxh29/\nawmXTYKucfMP6AQX2AjwOUFzKdilA6zhCfcBvmIhyqc2zlvAgHYwxCRemuJwkCoOKjhDD5jOwfHq\n5uUEBbyP9wKaKROzq7X2sJtip1itE5o2Cp/F/qstoW61fNMZPrCNfnpGJ1gasZJiAWXDRnDZ6mGH\nEZGc3R7NOcAJHKWWHmv3CjjPOdZ+gLPYSj9oqsOsUFS8xWLs8zjWcYW3X8CsTRz/AGOzNV9F0QvM\nAAAAAElFTkSuQmCC",
    linkWeight: 2,
    linkWeight2: 5,
    defaultTitleColor: 'RGB(114,117,128)',
    StatusColor: {
        '1': '#96caff',
        '2': '#b8b8b8',
        '3': '#ed4343',
        'green': 'green',
        'common': '#d9dbdd'
    }
}

/**
 * 锚点
 */
class AnchorNode {
    constructor(parentNode, index, type, data){
        this.id = `Anchor-${new Date().getTime()}`
        this.b_data = data
        this.parentNode = parentNode
        this.index = parentNode.anchors.filter(item=>{return item.type === type}).length+1
        this.type = type
        this.buildShape()
        this.el.d_data = this
    }

    buildShape(){
        const {type, index} = this
        this.el = new zrender.Arc({
            name: `${type}-${index}`,
            shape: {
                cx: NodeSizeConfig.nodeR*2*Math.cos(30*this.index/180*Math.PI),
                cy: NodeSizeConfig.nodeR*2*Math.sin(30*this.index/180*Math.PI),
                r: NodeSizeConfig.r
            },
            style: {
                fill: type === 'input' ? '#B290F4' : '#A6CD70',
                stroke: null
            }
        })
        this.el.hide()
    }
}

/**
 * 组件节点
 */
class ComNode {
    constructor(x,y,data){
        this.id = `Com-${new Date().getTime()}`
        this.type = 'ComNode'
        this.x = x
        this.y = y
        this.el = new zrender.Group({
            x: x,
            y: y
        })
        this.rectEl = null
        this.fromLinks = []
        this.toLinks = []
        this.anchors = []
        this.dragMode = ''
        this.b_data = null
        this.imgA = null
        this.setBData(data)
        this.buildComponment()
    }

    /**
     * 修改节点颜色
     * @param {*} status
     */
    changeStatusColor(status){
        this.rectEl.attr({
            style:{
                stroke: NodeSizeConfig.StatusColor[status]
            }
        })
    }

    /**
     * 修改节点状态图标
     * @param {装置值} status 
     * @param {状态对应的图片} images 
     * @param {位置标识,top,right,bottom,left四个角的位置} position 
     */
    changeNodeStatusImage(){
        if(this.statusImg){
            this.addNodeDownSate();
            this.changeTitleElColor('red')
        }else{
            this.createNodeDownImg(NodeSizeConfig.defaultStatusImg,'');
            this.addNodeDownSate();
            this.changeTitleElColor('red')
        }
    }

    /**
     * 删除当前节点状态图片
     */
    removeNodeStatusImages(){
        if(this.statusImg){
            //在节点画布中移除节点状态图标
            this.el.remove(this.statusImg);
            //删除节点状态图片
            delete this.statusImg;
        }
    }

    /**
     * 删除当前节点状态图片以及清楚当前节点定时器
     */
    removeNodeStatusImagesAndClearnTimer(){
        //删除节点上的异常图标
        this.removeNodeStatusImages();
        //还原字体颜色
        this.changeTitleElColor('#ffffff');
    }

    /**
     * 添加动画效果
     */
    addNodeDownSate(){
        //设置动画，从完全透明到完全显示
        this.statusImg.animate('style', true).when(0,{
            opacity: 0
        }).when(1000,{
            opacity: 1
        }).when(2000,{
            opacity: 0
        }).start();
    }

    /**
     * 修改节点字体颜色
     * @param {字体颜色} color 
     */
    changeTitleElColor(color){
        //修改字体颜色
        let vm = this;
        if(this.titleEl){
            this.titleEl.attr('style', {
                fill: color,
                x: vm.titleEl.style.x,
                y: vm.titleEl.style.y
            })
        }
        if(this.titleEl1){
            this.titleEl1.attr('style', {
                fill: color,
                x: vm.titleEl1.style.x,
                y: vm.titleEl1.style.y
            })
        }
        if(this.titleEl2){
            this.titleEl2.attr('style', {
                fill: color,
                x: vm.titleEl2.style.x,
                y: vm.titleEl2.style.y
            })
        }
    }

    /**
     * 创建节点状态图标
     * @param {装置值} status 
     * @param {状态对应的图片} images 
     * @param {位置标识,top,right,bottom,left四个角的位置} position 
     */
    createNodeDownImg(images, position){
        let x,y;
        if(position == 'top'){
            x = NodeSizeConfig.width/2 - NodeSizeConfig.statusWidth;
            y = -NodeSizeConfig.width/2;
        }else if(position == 'right'){
            x = NodeSizeConfig.width/2 - NodeSizeConfig.statusWidth;
            y = NodeSizeConfig.width/2 - NodeSizeConfig.statusWidth;
        }else if(position == 'bottom'){
            x = -NodeSizeConfig.width/2;
            y = NodeSizeConfig.width/2 - NodeSizeConfig.statusWidth;
        }else if(position == 'left'){
            x = -NodeSizeConfig.width/2;
            y = -NodeSizeConfig.width/2;
        }else{
            x = NodeSizeConfig.width/2 - NodeSizeConfig.statusWidth;
            y = -NodeSizeConfig.width/2;
        }
        //创建状态节点图标
        let imgEl1 = new zrender.Image({
            rotation: 0,
            origin: [15,15],
            style: {
                image: images == 'default' ? NodeSizeConfig.defaultStatusImg : images,
                x: x,
                y: y,
                width: NodeSizeConfig.statusWidth,
                height: NodeSizeConfig.statusWidth,
                opacity: 0
            },
            silent: true
        })
        //添加图片
        this.statusImg = imgEl1;
        this.el.add(imgEl1);
    }

    setBData(data){
        this.b_data = data
    }

    /**
     * 组在场景内的包围盒
     * @returns
     */
    getBoundingBox(num){
        let obox = this.el.getBoundingRect()
        let scale = AppManager.instance.sceneG.scaleX
        let box = null
        if(num){
            box = new zrender.BoundingRect(this.x - num, this.y - num, (obox.width+num)*scale, (obox.height+num)*scale)
        }else{
            box = new zrender.BoundingRect(this.x, this.y, obox.width*scale, obox.height*scale)
        }
        return box
    }

    addAnchorNode(anchorNode){
        this.anchors.push(anchorNode)
        this.el.add(anchorNode.el)
    }

    reName(text){
        this.titleEl.style.text = text
    }

    /**
     * 
     * @param {节点名称} nodeName 
     * @param {布局位置,top,right,bottom,left,四个位置中心} position 
     */
    buildComponmentText(nodeName, color, position, yOffset){
        let titleEl = new zrender.Text({
            style: {
                text: nodeName,
                textAlign: 'center',  // 文本水平居中 
                textBaseline: 'middle',  // 文本垂直居中
                fontSize: 14,
                fill: color,
                x: 0,
                y: 0
            },
        });
        let xOffset = titleEl.getBoundingRect().width/2;
        // let yOffset = titleEl.getBoundingRect().height;
        let x,y;
        if(position == 'top'){
            x = titleEl.style.x-xOffset;
            y = -NodeSizeConfig.width/2-yOffset/2;
        }else if(position == 'right'){
            x = NodeSizeConfig.width/2;
            y = -NodeSizeConfig.nodeR;
        }else if(position == 'bottom'){
            x = titleEl.style.x-xOffset;
            y = titleEl.style.y+yOffset;
        }else if(position == 'left'){
            x = titleEl.style.x - xOffset*2 - NodeSizeConfig.width/2 - 5;
            y = -NodeSizeConfig.nodeR;
        }else{
            x = titleEl.style.x-xOffset;
            y = titleEl.style.y+yOffset;
        }
        titleEl.attr({
            style: { 
                x: x, 
                y: y
            }
        })
        return titleEl;
    }

    /**
     * 构建节点组件
     */
    buildComponment(){
        let {x,y} = this
        let vm = this
        //创建节点名称内容
        let titleColor = '#ffffff';
        // if(this.b_data.nodeState == 2){
        //     titleColor = 'red';
        // }else{
        //     titleColor = '#ffffff';
        // }
        let titleEl = this.buildComponmentText(vm.b_data.nodeTypeName+"："+vm.b_data.nodeName, titleColor,'bottom', 15);
        let titleEl1,titleEl2;
        if(vm.b_data.nodeIp){
            titleEl1 = this.buildComponmentText("ip："+vm.b_data.nodeIp, titleColor,'bottom', 35);
        }
        if(vm.b_data.nodeMac){
            titleEl2 = this.buildComponmentText("mac："+vm.b_data.nodeMac, titleColor,'bottom', vm.b_data.nodeIp ? 55 : 35);
        }
        
        //绘制节点组框矩形
        let rectEl = new zrender.Rect({
            shape: {
                x:-(NodeSizeConfig.width/2),           //x,y代表坐标
                y:-(NodeSizeConfig.width/2),
                width:NodeSizeConfig.width,
                height:NodeSizeConfig.width,
            },
            style: {
                fill: 'transparent',
                // stroke: NodeSizeConfig.StatusColor[vm.b_data.nodeState || 'common']
                // stroke: NodeSizeConfig.backgroundColor
            }
        });

        vm.rectEl = rectEl
        vm.titleEl = titleEl
        vm.titleEl1 = titleEl1
        vm.titleEl2 = titleEl2
        //绘制节点图片
        let imgEl = new zrender.Image({
            rotation: 0,
            origin: [15,15],
            style: {
                image: vm.b_data.iconData ? vm.b_data.iconData : NodeSizeConfig.defaultImg,
                x: -NodeSizeConfig.nodeR,
                y: -NodeSizeConfig.nodeR,
                width: NodeSizeConfig.nodeR*2,
                height: NodeSizeConfig.nodeR*2,
                opacity: 1,
            },
            silent: true
        })

        rectEl.on('mousedown', (ev)=>{
            if(ev.which!=1){
                return
            }
            if(AppManager.instance.linkStatus){
                // 开始连线
                AppManager.instance.dragLinkMode = 'start'
                AppManager.instance.selectedFromElement = this
                this.selectedDragStartAnchor = this.d_data
            }else{
                AppManager.instance.selectedDragElement = this
                AppManager.instance.clickNode()
            }
        })

        rectEl.on('mouseup', (ev)=>{
            if(AppManager.instance.linkStatus){
                // 开始连线
                AppManager.instance.selectedToElement = this
            }
        })

        rectEl.on('mouseover', (ev)=>{
            rectEl.attr('style', {
                // stroke: NodeSizeConfig.stokeOverColor
                //fill: NodeSizeConfig.StatusColor['common'],
                lineWidth: 1,
                stroke: '#1cb8fa'
            })
            // titleEl.attr('style', {
            //     y: (titleEl.style.y + 15)
            // })
        })

        rectEl.on('mouseout', (ev)=>{
            rectEl.attr('style', {
                // stroke: NodeSizeConfig.StatusColor[vm.b_data.nodeState || 'common']
                fill: 'transparent',
                lineWidth: 0,
                stroke: 'none'
                // stroke: NodeSizeConfig.backgroundColor
            })
            // let titleElColor;
            // if(vm.b_data.nodeState == 2){
            //     titleElColor = 'red';
            // }else{
            //     titleElColor = '#ffffff';
            // }
            // // let yOffset = titleEl.getBoundingRect().height;
            // titleEl.attr('style', {
            //     fill: titleElColor,
            //     y: titleEl.style.y - 15
            // })
            if(this.imgA){
                this.imgA.pause()
            }
        })

        rectEl.on('contextmenu', (ev)=>{
            AppManager.instance.trigger('contextmenu', {event: ev, data: this})
        })

        this.el.add(titleEl)
        this.el.add(titleEl1)
        this.el.add(titleEl2)
        this.el.add(rectEl)
        this.el.add(imgEl)
        //离线添加动画效果
        if(this.b_data.nodeState == 2){
            this.createNodeDownImg(NodeSizeConfig.defaultStatusImg,'');
            this.addNodeDownSate();
            this.changeTitleElColor('red');
        }
    }

    /**
     * 获取已选锚点场景坐标
     * @returns
     */
    getAnchorPos(){
        let {selectedDragStartAnchor} = this
        if(selectedDragStartAnchor === null){
            return null
        }else{
            let _pos = null
            let node = selectedDragStartAnchor.parentNode
            if(selectedDragStartAnchor.type === 'input'){
                // 左一锚点
                _pos = node.el.transformCoordToGlobal(-3, 20)
            }else{
                // 右一锚点
                _pos = node.el.transformCoordToGlobal(63, 20)
            }
            let pos = AppManager.instance.sceneG.transformCoordToLocal(_pos[0], _pos[1])
            return pos
        }
    }

    /**
     * 移动到画布坐标
     * @param {*} canvasPos
     */
    dragMoveToCanvasPos(canvasPos){
        let pos = AppManager.instance.getScenePosFromCanvasPos(canvasPos)
        this.x = pos[0]
        this.y = pos[1]
        this.el.attr('x', pos[0])
        this.el.attr('y', pos[1])
    }

    /**
     * 移动到场景坐标
     * @param {*} scenePos
     */
    dragMoveToScenePos(scenePos){
        this.x = scenePos[0]-30
        this.y = scenePos[1]-20
        this.el.attr('x', scenePos[0]-30)
        this.el.attr('y', scenePos[1]-20)
    }

    refreshLinksFromMove(){
        for(let i=0;i<this.fromLinks.length;i++){
            let link = this.fromLinks[i]
            link.refreshPosFromMove()
        }

        for(let i=0;i<this.toLinks.length;i++){
            let link = this.toLinks[i]
            link.refreshPosFromMove()
        }
    }
}

class Link {
    constructor(fromNode, fromAnchor, toNode, toAnchor, type, text, linkType, linkId,linkConfig,linkState){
        this.id = linkId
        this.type = type
        this.text = text
        this.fromNode = fromNode
        this.fromAnchor = fromAnchor
        this.toNode = toNode
        this.toAnchor = toAnchor
        this.selected = false
        this.linkType = linkType
        this.linkConfig = linkConfig
        this.linkState = linkState
        if(linkConfig){
            // 0为实线
            if(linkConfig.linkDashed=='0'){
                this.el = new zrender.Line({
                    shape: this.buildShape(),
                    style: {
                        fill: null,
                        stroke: linkConfig.linkColor,
                        lineWidth: linkConfig.linkSize,
                    }
                });
            }
            // 1为虚线
            else{
                this.el = new zrender.Line({
                    shape: this.buildShape(),
                    style: {
                        fill: null,
                        stroke: linkConfig.linkColor,
                        lineWidth: linkConfig.linkSize,
                        lineDash:[5,10]
                    }
                });
            }

        }else{

            this.el = new zrender.Line({
                shape: this.buildShape(),
                style: {
                    fill: null,
                    stroke: NodeSizeConfig.linkColor,
                    lineWidth: this.linkType === 1 ? NodeSizeConfig.linkWeight : NodeSizeConfig.linkWeight2,
                }
            });

        }


        let {fromX, fromY, toX, toY} = this.getXY()
        this.textEl = new zrender.Text({
            style: {
                text: text,
                textAlign: 'center',
                textVerticalAlign: 'middle',
                fontSize: 12,
                fill: 'RGB(114,117,128)',
            },
            position: [Math.min(fromX, toX)+Math.abs(fromX-toX)/2, Math.min(fromY, toY)+Math.abs(fromY-toY)/2]
        });

        if(this.linkState == 2){
            this.createLinkDownImg();
        }
        this.el.on('click', (ev)=>{
            this.toggleSelected()
        })
        this.textEl.on('click', (ev)=>{
            this.toggleSelected()
        })
        this.addLinksToNode();
    }

    /**
     * 修改指定线条颜色
     * @param {线条颜色} linkColor 
     */
    changeLinkStroke(linkColor){
        this.el.attr('style', {
            stroke: linkColor?linkColor:NodeSizeConfig.linkColor
        })
    }

    /**
     * 添加线条下线图标
     */
    createLinkDownImg(){
        let {fromX, fromY, toX, toY} = this.getXY()
        //创建状态连线图标
        let linkDownImg = new zrender.Image({
            rotation: 0,
            origin: [15,15],
            style: {
                image: NodeSizeConfig.linkDownImg,
                x: Math.min(fromX, toX)+Math.abs(fromX-toX)/2,
                y: Math.min(fromY, toY)+Math.abs(fromY-toY)/2,
                width: NodeSizeConfig.statusWidth,
                height: NodeSizeConfig.statusWidth
            },
            silent: true
        })
        let xOffset = linkDownImg.getBoundingRect().width/2;
        let yOffset = linkDownImg.getBoundingRect().height/2;
        linkDownImg.attr('style',{
            x: linkDownImg.style.x - xOffset,
            y: linkDownImg.style.y - yOffset
        })
        this.linkDownImg = linkDownImg;
        //添加画布
        return linkDownImg;
    }

    /**
     * 删除连线断开图标
     */
    removeLinkDownImg(){
        if(this.linkDownImg){
            //删除连线上的断开图标
            delete this.linkDownImg;
        }
    }
    
    toggleSelected(){
        this.selected = !this.selected
        if(this.selected){
            this.el.attr('style', {
                lineWidth: 5
            })
            // this.textEl.attr('style', {
            //     fill: NodeSizeConfig.stokeOverColor
            // })
            AppManager.instance.selectedLink = this
        }else{
            this.el.attr('style', {
                lineWidth: 2
            })
            // this.textEl.attr('style', {
            //     fill: NodeSizeConfig.textColor
            // })
            AppManager.instance.selectedLink = null
        }
        AppManager.instance.trigger('toggleLinkSelected', {
            link: this,
            selected: this.selected
        })
    }

    getXY(){
        let {fromNode, toNode, fromAnchor, toAnchor} = this
        if(this.linkType === 1){
            // 细线
            let fromV = zrender.vector.create(fromNode.x, fromNode.y)
            let toV = zrender.vector.create(toNode.x, toNode.y)
            let fromD = zrender.vector.create()
            let toD = zrender.vector.create()
            zrender.vector.sub(fromD, toV, fromV)
            zrender.vector.sub(toD, fromV, toV)
            zrender.vector.normalize(fromD, fromD)
            zrender.vector.normalize(toD, toD)
            zrender.vector.scaleAndAdd(fromV, fromV, fromD, NodeSizeConfig.nodeR)
            zrender.vector.scaleAndAdd(toV, toV, toD, NodeSizeConfig.nodeR)
            return {
                fromX: fromV[0],
                fromY: fromV[1],
                toX: toV[0],
                toY: toV[1]
            }
        }else{
            // 粗线
            const r = NodeSizeConfig.nodeR
            const c1 = [fromNode.x, fromNode.y]
            const c2 = [toNode.x, toNode.y]
            // 间隔度数，可以调整
            const rdeg = 30/180*Math.PI
            const ms2 = zrender.matrix.create()
            zrender.matrix.rotate(ms2, ms2, rdeg)
            const me2 = zrender.matrix.create()
            zrender.matrix.rotate(me2, me2, -rdeg)
            let toEDV = zrender.vector.create(c2[0] - c1[0], c2[1] - c1[1])
            zrender.vector.normalize(toEDV, toEDV)
            zrender.vector.applyTransform(toEDV, toEDV, ms2)
            let toSDV = zrender.vector.create(c1[0] - c2[0], c1[1] - c2[1])
            zrender.vector.normalize(toSDV, toSDV)
            zrender.vector.applyTransform(toSDV, toSDV, me2)
            let sPX = [c1[0]+r*toEDV[0],c1[1]+r*toEDV[1]]
            let ePX = [c2[0]+r*toSDV[0],c2[1]+r*toSDV[1]]
            return {
                fromX: sPX[0],
                fromY: sPX[1],
                toX: ePX[0],
                toY: ePX[1]
            }
        }
    }

    buildShape(){
        let {fromX, fromY, toX, toY} = this.getXY()
        let shape= {
            x1: fromX,
            y1: fromY,
            x2: toX,
            y2: toY
        }
        return shape
    }

    addLinksToNode(){
        this.fromNode.fromLinks.push(this)
        this.toNode.toLinks.push(this)
    }

    refreshPosFromMove(){
        let {toNode, fromNode} = this
        this.el.attr('shape', this.buildShape())
        this.textEl.attr('position', [Math.min(fromNode.x, toNode.x)+Math.abs(fromNode.x-toNode.x)/2, Math.min(fromNode.y, toNode.y)+Math.abs(fromNode.y-toNode.y)/2])
        let xOffset,yOffset;
        if(this.linkDownImg){
            xOffset = this.linkDownImg.getBoundingRect().width/2;
            yOffset = this.linkDownImg.getBoundingRect().height/2;
            this.linkDownImg.attr('style',{
                x: Math.min(fromNode.x, toNode.x)+Math.abs(fromNode.x-toNode.x)/2 - xOffset,
                y: Math.min(fromNode.y, toNode.y)+Math.abs(fromNode.y-toNode.y)/2 - yOffset
            })
        }
    }

    setDashStyle(type){
        if(type === 'open'){
            this.el.attr('style', {
                lineDash: [3,3],
                lineDashOffset: 0
            })
            this.el.animate('style', true).when(
                10000, {
                    lineDashOffset: -250
                }).start()
            window._testEl = this.el
        }else{
            this.el.attr('style', {
                lineDash: null
            })
        }
    }
}

export {ComNode, Link, AnchorNode}
